<template>
  <div class="language-switcher">
    <a-dropdown :trigger="['click']" placement="bottomRight">
      <a class="ant-dropdown-link" @click.prevent>
        <img src="../assets/imgs/i18n_white.svg" alt="Language" class="language-icon" />
        <span class="current-language">{{ getCurrentLanguageName() }}</span>
      </a>
      <template #overlay>
        <a-menu @click="handleMenuClick">
          <a-menu-item 
            v-for="lang in languages" 
            :key="lang.code"
            :class="{ 'active-language': currentLanguage === lang.code }"
          >
            {{ lang.name }}
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
  </div>
</template>

<script>
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { switchLanguage, languages } from '../locales/index.js'

export default {
  name: 'LanguageSwitcher',
  setup() {
    const { locale } = useI18n()

    const currentLanguage = computed(() => locale.value)

    const getCurrentLanguageName = () => {
      const current = languages.find(lang => lang.code === currentLanguage.value)
      return current ? current.name : '中文'
    }

    const handleMenuClick = (menuInfo) => {
      switchLanguage(menuInfo.key)
    }

    return {
      currentLanguage,
      languages,
      getCurrentLanguageName,
      handleMenuClick
    }
  }
}
</script>

<style scoped>
.language-switcher {
  display: inline-block;
}

.ant-dropdown-link {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  color: white;
  text-decoration: none;
  transition: all 0.3s;
  cursor: pointer;
  gap: 8px;
}

.language-icon {
  width: 16px;
  height: 16px;
}

.current-language {
  font-size: 14px;
  font-weight: 500;
}

</style> 